import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import './Progress.less';
import FormItem from '../FormItem';

class Progress extends React.Component {
    displayName = 'Progress';

    static defaultProps = {
        value: 0,
        min: 0,
        max: 100,
        showPercent: true,
        strokeWidth: 10,
        type: 'line',
        radius: 60,
        theme: 'primary'
    };

    renderCircle () {
        const {value, min, max, theme} = this.props;
        const colorMap = {
            primary: '#20A0FF',
            danger: '#FF4949',
            success: '#13CE66',
            warning: '#F7BA2A'
        };
        const r = this.props.radius;
        // 计算当前角度对应的弧度值
        const rad = 2 * Math.PI;

        // 极坐标转换成直角坐标
        const x = (Math.sin(rad) * r).toFixed(2);
        const y = -(Math.cos(rad) * r).toFixed(2);

        // path 属性 A 61 61 0 1 1 -0 61 A 61 61 0 1 1 -0 -61
        const descriptions = ['M', 0, -r, 'A', r, r, 0, 1, 1, x, -y, 'A', r, r, 0, 1, 1, x, y];

        const strokeWidth = this.props.strokeWidth;
        const tx = r + strokeWidth / 2;

        const percent = (value - min) / (max - min);
        const dd = rad * r;
        const offset = dd * (1 - percent);
        let status = this.props.status;
        if (value == max) {
            status = 'finished';
        }

        let color = status === 'finished' ? 'success' : theme;
        if (status === 'exception') {
            color = 'danger';
        }
        return (
            <svg width='100%' height='100%' version='1.1'
                xmlns='http://www.w3.org/2000/svg' style={{width: 2 * r + strokeWidth, height: 2 * r + strokeWidth}}>
                <circle cx={tx} cy={tx} r={r} stroke='#f3f3f3'
                    strokeWidth={strokeWidth} fillOpacity='0' />
                <path className='cm-progress-bar-path'
                    d={descriptions.join(' ')}
                    strokeLinecap='round'
                    strokeWidth={strokeWidth}
                    fillOpacity='0'
                    stroke={colorMap[color]}
                    transform={`translate(${tx},${tx})`}
                    style={{strokeDashoffset: offset, strokeDasharray: dd}}
                />
            </svg>
        );
    }

    render () {
        let {className, style, value, max, min, radius, theme, showPercent, active, strokeWidth, status, type, format} = this.props;
        if (value == max) {
            status = 'finished';
        }
        className = classNames('cm-progress', className, theme, {
            'cm-progress-active': active,
            'cm-progress-show-info': showPercent,
            [`cm-progress-${status}`]: status,
            [`cm-progress-${type}`]: type
        });
        const current = parseInt((value - min) / (max - min) * 100, 10);
        const width = `${current}%`;
        let percent = showPercent ? width : null;

        if (status === 'finished' && showPercent) {
            const icon = type === 'circle' ? 'check' : 'check-circle';
            percent = <Icon name={icon} />;
        }
        if (status === 'exception' && showPercent) {
            const icon = type === 'circle' ? 'x' : 'x-circle';
            percent = <Icon name={icon} />;
        }

        if (format && typeof format === 'function') {
            percent = format(current, value, min, max);
        }

        let bar = null;
        let fontSize = 25;
        if (type === 'circle') {
            bar = this.renderCircle();
            fontSize = fontSize * radius / 60;
        } else {
            bar = <div className='cm-progress-bar' style={{width, height: `${strokeWidth}px`}} />;
        }
        return (
            <div className={className} style={style}>
                <div className='cm-progress-outer'>
                    <div className='cm-progress-inner'>
                        {bar}
                        {type === 'circle' ? <span className='cm-progress-info' style={{fontSize}}>
                            {percent}
                        </span> : null}
                    </div>
                </div>
                {(type === 'circle' || !showPercent) ? null : <span className='cm-progress-info'>{percent}</span>}
            </div>
        );
    }
}

FormItem.register(Progress, 'progress');

export default Progress;
